<template>
  <!-- 表单选择 -->
  <van-overlay class="selection-card-moadl" :show="show" :lock-scroll="false">
    <div class="form-selection-card" @click.stop>
      <div class="content">
        <p class="form-title">您有{{ prizeNum }}份权益奖品待领取</p>
        <p class="form-text">权益价值合计{{ amount * prizeNum }}元,请任选一种类型奖品</p>
        <van-radio-group v-model="radioData">
          <div class="card" v-for="(item, index) in prizeTypeList" :key="index">
            <van-radio :name="prizeTypeCfg[item].id" checked-color="#ee0a24">
              <div class="selectopn-box">
                <img class="selectopn-img" :src="prizeTypeCfg[item].image">
                <div class="selection-text">
                  <p class="text">{{ prizeTypeCfg[item].name }}(面值{{ amount }}元/份)</p>
                  <p>数量：{{ prizeNum }}份</p>
                </div>
              </div>
            </van-radio>
          </div>
        </van-radio-group>

        <div class="confirm-btn" @click="hangleBtnchange">确认选择</div>
      </div>
      <div class="close" @click="handleShow"></div>
    </div>
  </van-overlay>
</template>

<script setup>
import {defineProps, reactive, ref} from "vue";
import {useImage} from "@/utils/useImage.js";

const images = useImage()
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  // 权益类型
  prizeTypeList: {
    type: Array,
    default: []
  },
  // 可领取面值
  amount: {
    type: Number,
    default: 0
  },
  //可领取张数
  prizeNum: {
    type: Number,
    default: 583
  }
})

const radioData = ref()

const prizeTypeCfg = {
  583: {id: 583, name: '中石化加油卡', image: images.icon_jyk, grayImage: images.icon_jyk_gray},
  493: {id: 493, name: '京东E卡', image: images.icon_jd, grayImage: images.icon_jd_gray},
  584: {id: 584, name: '天猫享淘卡', image: images.icon_tmxtk, grayImage: images.icon_tmxtk_gray}
};

const emits = defineEmits(['handleClose', 'hangleBtnchange'])

const handleShow = () => {
  emits("handleClose")
}
const hangleBtnchange = () => {
  emits("hangleBtnchange", radioData.value)
}
</script>

<style lang="less">
.selection-card-moadl {
  .form-selection-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .content {
      padding: 50px 35px;
      width: 660px;
      height: 709px;
      border-radius: 20px;
      overflow: hidden;
      box-sizing: border-box;
      //background: linear-gradient(#fbf3ef, #f9e9d9);
      background: url("@/assets/image/sh1_popup_bg.png") no-repeat;
      background-size: contain;

      .form-title {
        font-size: 38px;
        color: #262626;
        font-weight: 500;
        line-height: 1.5em;
      }

      .form-text {
        margin-bottom: 18px;
        font-size: 24px;
        color: #ff3c01;
        font-weight: 500;
        line-height: 1.5em;
      }

      .card {
        padding: 45px 22px;
        border-radius: 20px;
        border: 1px solid #b6bdc7;
        background: #ffffff;

        &:first-of-type {
          margin-bottom: 30px;
        }

        .selectopn-box {
          display: flex;

          .selectopn-img {
            width: 60px;
            height: 60px;
          }

          .selection-text {
            padding-left: 20px;
            text-align: left;
            font-size: 24px;
            font-weight: 500;
            color: #666666;

            .text {
              font-size: 34px;
              color: #1a1a1a;
              font-weight: bold;
            }
          }
        }

        .selection-amount-box {
          margin-top: 10px;
          padding-left: 134px;
          display: flex;
          justify-content: space-between;

          .text {
            font-size: 28px;
            color: #666666;
          }
        }
      }

      .confirm-btn {
        margin: 34px auto 0;
        width: 550px;
        height: 96px;
        line-height: 96px;
        text-align: center;
        font-size: 36px;
        color: #ffffff;
        border-radius: 50px;
        background: linear-gradient(to right, #fe6f3f, #f82d1c);
      }
    }

    .close {
      margin-top: 40px;
      width: 76px;
      height: 76px;
      background: url("@/assets/image/icon_close.png") no-repeat;
      background-size: contain;
    }
  }
}

.van-stepper--round .van-stepper__plus {
  background: #ff3c01;
}

.van-stepper--round .van-stepper__minus {
  color: #ff3c01;
  border: 1px solid #ff3c01;
}
</style>
